<template>
	<div>
		<form>
			<el-form-item label="工单来源" class="gdly">
				<el-select v-model="value1" multiple placeholder="选择工单来源" style="width: 500px">
					<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item label="工单标签" class="gdbq">
				<el-select v-model="value2" multiple placeholder="选择工单标签" style="width: 500px">
					<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item label="工单类型" class="gdlx">
				<el-select v-model="value3" multiple placeholder="选择工单类型" style="width: 500px">
					<el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item label="关联房屋" class="glfw">
				<el-cascader v-model="value4" :options="options4" :props="props" @change="handleChange" style="width: 160px;" ;/>
			</el-form-item>
			<el-form-item label="工单时间状态" class="gdsjzt1">
				<el-select v-model="value5" clearable placeholder="可选择工单时间状态" style="width: 200px">
					<el-option v-for="item in options5" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item label="执行人" class="zxr">&nbsp;&nbsp;&nbsp;&nbsp;
				<el-select v-model="value6" multiple placeholder="请选择执行人" style="width: 500px">
					<el-option v-for="item in options6" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item label="最近更新时间" class="zjgxsj1">
				<el-date-picker type="date" placeholder="开始" style="width: 220px" /> &nbsp;
				<span class="text-gray-500">至</span>&nbsp;&nbsp;
				<el-date-picker placeholder="结束" style="width: 220px" />
			</el-form-item>
			<el-form-item label="创建时间" class="cjsj">
				<el-date-picker type="date" placeholder="开始" style="width: 220px" /> &nbsp;
				<span class="text-gray-500">至</span>&nbsp;&nbsp;
				<el-date-picker placeholder="结束" style="width: 220px" />
			</el-form-item>
			<el-form-item label="开始时间" class="kssj">
				<el-date-picker type="date" placeholder="开始" style="width: 220px" /> &nbsp;
				<span class="text-gray-500">至</span>&nbsp;&nbsp;
				<el-date-picker placeholder="结束" style="width: 220px" />
			</el-form-item>
			<el-form-item label="结束时间" class="">
				<el-date-picker type="date" placeholder="开始" style="width: 220px" /> &nbsp;
				<span class="text-gray-500">至</span>&nbsp;&nbsp;
				<el-date-picker placeholder="结束" style="width: 220px" />
			</el-form-item>
			<el-form-item label="审核人" class="shr1">
				<el-select v-model="value7" clearable placeholder="选择审核人" style="width: 200px">
					<el-option v-for="item in options7" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item label="审核时间" class="shsj2">
				<el-date-picker type="date" placeholder="开始" style="width: 220px" /> &nbsp;
				<span class="text-gray-500">至</span>&nbsp;&nbsp;
				<el-date-picker placeholder="结束" style="width: 220px" />
			</el-form-item>
			<el-form-item label="完成时间" class="wcsj1">
				<el-date-picker type="date" placeholder="开始" style="width: 220px" /> &nbsp;
				<span class="text-gray-500">至</span>&nbsp;&nbsp;
				<el-date-picker placeholder="结束" style="width: 220px" />
			</el-form-item>
			<div class="czcx">
				<el-button class="btn1">重置</el-button>
				<el-button class="btn2">查询</el-button>
			</div>
		</form>
	</div>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	const value4 = ref([])

	const props = {
		expandTrigger: 'hover' as const,
	}

	const handleChange = (value4) => {
		console.log(value4)
	}

	const options4 = [
		{
			value: 'guide',
			label: 'Guide',
			children: [
				{
					value: 'disciplines',
					label: 'Disciplines',
					children: [
						{
							value: 'consistency',
							label: 'Consistency',
						},
						{
							value: 'feedback',
							label: 'Feedback',
						},
						{
							value: 'efficiency',
							label: 'Efficiency',
						},
						{
							value: 'controllability',
							label: 'Controllability',
						},
					],
				},
			]
		}
	]
</script>

<style scoped>
	.btn1 {
		width: 90px;
		height: 35px;
	}

	.btn2 {
		background-color: #00C36D;
		color: white;
		margin-left: 20px;
		width: 90px;
		height: 35px;
	}

	.czcx {
		margin-right: 1170px;
	}
	.wcsj1{
		margin-left: 700px;
		margin-top: -50px;
	}
</style>